Three.js: FullScreenQuad

その名の通り、全画面のQuadを表示することができる

Camera・Sceneの定義さえ必要ない

code:js

import * as THREE from 'three';

import { FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass.js';

// ...

const quadVert = `

varying vec2 vUv;

void main() {

vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

}

`;

const uvFrag = `

uniform float time;

varying vec2 vUv;

void main() {

gl_FragColor = vec4( vUv, 0.5 + 0.5 * sin( time ), 1.0 );

}

`;

const material = new THREE.ShaderMaterial( {

uniforms: {

time: { value: 0.0 },

},

vertexShader: quadVert,

fragmentShader: uvFrag,

} );

const fsq = new FullScreenQuad( material );

fsq.render( renderer );

Demo